<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.line-with-text {  
			    position: relative;  
			    text-align: center; /* 确保文本居中 */  
			    line-height: 2; /* 调整这个值以适应你的需求，它决定了文本和横线之间的垂直间距 */  
			}  
			  
			.line {  
			    display: inline-block;  
			    width: 500px; /* 或者使用具体的像素值，取决于你想要的横线长度 */  
			    height: 1px; /* 横线的高度 */  
			    background-color: black; /* 横线的颜色 */  
			    vertical-align: middle; /* 确保横线垂直居中 */  
			    position: relative; /* 相对于它的父元素定位 */  
			    z-index: 1; /* 确保横线在文本下面 */  
			}  
			  
			.text {  
			    position: absolute;  
			    top: 50%; /* 将文本垂直居中 */  
			    transform: translateY(-50%); /* 修正垂直居中的偏移 */  
			    background-color: white; /* 确保文本在横线上可见 */  
			    padding: 0 10px; /* 文本周围的空白，取决于你的设计 */  
			    z-index: 2; /* 确保文本在横线上方 */  
				left: 750px;
			}
		</style>
	</head>
	<body>
		<div class="line-with-text">  
		    <span class="line"></span>  
		    <span class="text">你的文字</span>  
		</div>
	</body>
</html>